<!--
 * @Description: 
 * @Version: 0.1
 * @Autor: Civet
 * @Date: 2019-08-02 16:04:58
 * @LastEditors: Civet
 * @LastEditTime: 2019-08-02 16:04:58
 -->
<template>
  <my-el-menu
    :defaultActive="defaultActive"
    :isCollapse="getIsCollapse"
    :datas="datas"></my-el-menu>
</template>

<script type="text/ecmascript-6">
  import myElMenu from '@/UIcomponents/myElementUI/myElMenu/MyElmenu';
  import {mapGetters, mapActions} from 'Vuex';
  import {getLeftMenu} from "@/httpUtils/apiHome";

  export default {
    name: 'LeftMenu',
    components: {myElMenu},
    props: {},
    data() {
      return {
        defaultActive: '', // 默认展开的项
        datas: [], // 列表的数据
        configMap: {},
        isCollapse: false
      };
    },
    methods: {
      ...mapActions(['setTabs']),
      setActivePath(path) {
        // 路径至匹配前三
        let pathArr = path.split("/");
        pathArr.length = 3;
        path = pathArr.join("/");
        this.defaultActive = path;
      }

    },
    watch: {
      $route(newV) {
        this.setActivePath(newV.path)
      }
    },
    computed: {
      ...mapGetters(['getIsCollapse'])
    },
    mounted() {
      getLeftMenu().then(res => {
        this.datas = res.data.datas;
        this.setTabs(res.data.datas);
        // 设置默认展开的项
        this.setActivePath(this.$route.path)
      });
    },
    destroyed() {
    }
  };
</script>
<style scoped lang="less">
</style>
